<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				/* 了解即可，用的比较少 */
				/* direction: rtl; */
			}

			.div0 {
				width: 490px;
				height: 500px;
				background-color: greenyellow;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: flex-start; 
				align-content: space-between;
				flex-wrap: wrap;
				/* 
					display: flex;
						将一个元素变成弹性盒子，里面的子元素都具有内联块级元素的特点
					flex-direction: row;
						默认为row，从左到右，水平排列
						row-reserve：从右到左，水平排列
							justify-content：控制水平方向
								space-around：将空白部分平均分配给每个元素周围
								space-between：开始和结束元素靠边，中间将空白部分平均分配
						column：列，垂直排列
							justify-content：控制垂直方向
					align-items：不仅控制元素行的对齐，还可以子元素相互之间对齐方式	
						stretch：默认值，顶部对齐
						center：中线对齐
				 */
			}

			.div0>div {
				width: 100px;
				height: 100px;
				background-color: red;
			}
			
			.div5 {
				align-self: flex-end;
			}
		</style>
	</head>
	<body>
		<div class="div0">
			<div>
				1
			</div>
			<div>
				2
			</div>
			<div style="height: 150px;">
				3
			</div>
			<div>
				4
			</div>
			<div class="div5">
				5
			</div>
			<div style="height: 150px;">
				6
			</div>
		</div>
	</body>
</html>
